<template>
  <!-- 设备管理 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="设备名称">
              <a-input v-model="pagination.deviceName" placeholder="请输入设备名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="品牌">
              <a-input v-model="pagination.brand" placeholder="请输入品牌"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="设备生产">
              <a-input v-model="pagination.deviceIdentifier" placeholder="请输入设备生产Identifier"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="制造商">
              <a-input v-model="pagination.manufacturer" placeholder="请输入制造商"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
          </a-col>
          <!-- <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col> -->
        </a-row>
      </a-form>
    </div>
    <div class="filter-container">
      <template>
        <div>
          <a-button type="primary" @click="onAdd" icon="plus">
            新增设备
          </a-button>
        </div>
      </template>
    </div>
    <a-back-top />
    <div>
      <template>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :loading="loading"
          :rowKey="(record) => { return record.deviceId }"
          :scroll="{ x: true }"
          :pagination="pagination">
          <span slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="onConfig(record)">设备配置</a>
          </span>
        </a-table>
      </template>
    </div>
    <devicesModal ref="devicesModal" v-if="dialog.devices" @success="tableData" @close="dialog.devices = false" />
    <configModal ref="configModal" v-if="dialog.config" @success="tableData" @close="dialog.config = false" />
  </a-card>
</template>

<script>

// 新增设备和设备配置
import devicesModal from './devicesSave'
import configModal from './configSave'
import { Modal } from 'ant-design-vue'
import { getDevices } from '@/api/clockingIn'

export default {
  components: { devicesModal, configModal },
  data () {
    return {
      // 高级搜索 展开/关闭
      advanced: false,

      columns: [
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          key: 'deviceName',
          align: 'center',
          width: 200
        },
        {
          title: '品牌',
          dataIndex: 'brand',
          key: 'brand',
          align: 'center',
          width: 150
        },
        {
          title: '设备生产Identifier',
          dataIndex: 'deviceIdentifier',
          key: 'deviceIdentifier',
          align: 'center',
          width: 200
        },
        {
          title: '制造商',
          dataIndex: 'manufacturer',
          key: 'manufacturer',
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          align: 'center',
          // fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      dialog: {
        devices: false,
        config: false
      },
      loading: false,
      pagination: {
        // 分页配置
        pageSize: 6, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        deviceName: '', //	设备名称
        brand: '', //	品牌
        deviceIdentifier: '', //	设备生产Identifier
        manufacturer: '', //	制造商
        onChange: this.handlePageChange // 页码改变时的回调函数
      }
    }
  },
  mounted () {
    this.tableData()
  },
  methods: {
    // 高级搜索切换
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 搜索
    onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 6
      this.tableData()
    },
    // 重置
    onReset () {
      this.pagination = {
        // 分页配置
        pageSize: 6, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        roleTypeIds: '',
        organizationName: '',
        organizationCode: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      }
      this.tableData()
    },
    handlePageChange (page, pageSize) {
      this.pagination.current = page
      this.tableData()
    },
    // 新增设备
    onAdd () {
      this.dialog.devices = true
      this.$nextTick(() => {
        this.$refs.devicesModal.open()
      })
    },
    // 设备配置
    onConfig (row) {
      this.dialog.config = true
      this.$nextTick(() => {
        this.$refs.configModal.open(row)
      })
    },
    tableData () {
      this.loading = true
      const par = {
        ...this.pagination
      }
      getDevices(par).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.dataSource = res.data.datas
          this.pagination.total = res.data.total
        }
        this.loading = false
      })
    },

    onDel (row) {
      const _this = this
      Modal.confirm({
        title: '删除信息',
        content: '确定要删除吗？',
        onOk: () => {
          deleteTenants(row.tenantId).then(res => {
            if (res.code == 200) {
              _this.tableData()
              _this.$message.success('删除成功')
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less" >
.send-display-container {
  width: 100%;
  background-color: #ffffff;
  padding: 24px;
}

.filter-container {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  justify-content: left;

  .label {
    padding-right: 20px;

    white-space: nowrap;
  }

  .input-container {
    width: 300px;
    margin-right: 20px
  }

  .btn {
    margin-right: 20px;
  }
}

/deep/ .ant-modal {
  min-width: 700px;
  margin-left: 30%;
}
</style>
